<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>帖子详情</title>
    <link href="css/css/base.css" rel="stylesheet">
    <link href="css/css/index.css" rel="stylesheet">
    <link href="css/css/media.css" rel="stylesheet">
    <link href="css/comment.css"   rel="stylesheet">
    <link href="css/style2.css"    rel="stylesheet">
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,700italic,800,300,300italic,400italic,400,600,600italic'
          rel='stylesheet' type='text/css'>
    <!--Custom-Theme-files-->
    <%--<link href="css/style.css" rel='stylesheet' type='text/css' />--%>
    <script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!--/script-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
            });
        });
    </script>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <!--[if lt IE 9]>
    <script src="js/modernizr.js"></script>
    <script src="js/silder.js"></script>
    <![endif]-->
</head>
<body>
<div class="ibody">
    <article>
        <h4 class="about_h">您现在的位置是：<a href="/">我发布的</a>><a href="1/">帖子详情</a></h4>
        <div class="bloglist">
            <div class="newblog">
                <ul>
                    <h3><a href="/">个人博客从简不繁</a></h3>
                    <div class="autor">
                        <span>作者：杨青</span>
                        <span>分类：[<a href="javascript:void(0)">日记</a>]</span>
                        <span>浏览（<a href="javascript:void(0)">459</a>）</span>
                        <span>评论（<a href="javascript:void(0)">30</a>）</span>
                        <span>点赞（<a href="javascript:void(0)">30</a>）</span>
                        <span>时间（2014-04-08）</span>
                    </div>
                    <figure style="margin-left: 200px"><img src="images/01.jpg" ></figure>
                    <p>十一月中旬开始，排名突然下降了，网站“个人博客”关键词排名从第一页第二名滑落到100页以后了，</br>
                        个人博客这个关键词百度已经搜不到了，仅有google、搜狗...
                    </p>
                </ul>
            </div>
            </hr style="lighting-color:black">
            <%--<div class="commentAll">
                <!--评论区域 begin-->
                <div class="reviewArea ">
                    <textarea class="content comment-input" placeholder="请输入内容..." onkeyup="keyUP(this)"></textarea>
                    <a href="javascript:;" class="plBtn">评论</a>
                </div>
                <!--评论区域 end-->
                <!--回复区域 begin-->
                <div class="comment-show">
                    <div class="comment-show-con clearfix">
                        <div class="comment-show-con-img pull-left">
                            <img src="images/co.png" alt="">
                        </div>
                        <div class="comment-show-con-list pull-left clearfix">
                            <div class="pl-text clearfix">
                                <a href="#" class="comment-size-name">大头网 : </a>
                                <span class="my-pl-con">&nbsp;欢迎来到我们的网站!</span>
                            </div>
                            <div class="date-dz">
                                <span class="date-dz-left pull-left comment-time">2017-6-6 11:11:39</span>
                                <div class="date-dz-right pull-right comment-pl-block">
                                    <a href="javascript:;" class="removeBlock">删除</a>
                                    <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                                    <span class="pull-left date-dz-line">|</span>
                                    <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a>
                                </div>
                            </div>
                            <div class="hf-list-con"></div>
                        </div>
                    </div>
                </div>
                <!--回复区域 end-->
            </div>--%>
            <div id="comments" class="response">
                <h4>评论区</h4><!--分页展示回帖-->
                <form action="ReplyServlet" method="post">
                    <inpt type="hidden" name="newsid" value="${news.newsid}"/>
                    <img style="width: 2em;height: 2em;border-radius:50%;float:left;" src="images/<%--${loginuser.userpic}--%>co.png" /> <textarea id="replys"  style="font-size: 1.1em;line-height: 2em;border:1px solid grey;width: 600px;height:2em;overflow: auto;resize: none;" placeholder="想对作者说点什么..."></textarea><br/>
                    <div id="divhidden" style="width:628px;text-align: right; margin-top:0.5em;display:none;"> <%--style="disply:none;--%><div id="tips" style="display: inline-block;"><%--您还可以输入<span id="fontcounts">200</span>个字符--%></div><input id="doReply" style="background-image: linear-gradient(to top right,blue,red);color: white;" type="submit"  value="发表评论"/></div>
                </form>
            </div>
        </div>
        <div class="page">

        </div>
    </article>
    <script src="js/silder.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/jquery.flexText.js"></script>
    <script type="text/javascript" src="js/myDetailKJs.js"></script>
    <script type="text/javascript">
        var pageNo;
        var totalPages;
        $(function () {
            $("[class*='glyphicon-thumbs-up']").toggle(function () {
                $.ajax({
                    type: "POST",
                    url: "AddClickcountServlet",
                    data: {newsid:${news.newsid}},
                    dataType: "JSON",
                    success: function (data) {
                        $("#clickcounts").text(data);
                    }
                })
            }, function () {
                $.ajax({
                    type: "POST",
                    url: "MinusClickcountServlet",
                    data: {newsid:${news.newsid}},
                    dataType: "JSON",
                    success: function (data) {
                        $("#clickcounts").text(data);
                    }
                })
            });
            var getReplyList=function(curr){
                $.ajax({
                    type:"POST",
                    url:"ShowReplyListServlet",
                    data:{newsid:${news.newsid},
                        pageIndex:curr==null?1:curr},
                    dataType:"JSON",
                    success:function(data){
                        if(data.list!=null){
                            $.each(data.list,function (index,obj) {
                                var replyStr="";
                                replyStr+="<div class='media response-info'><div class='media-left response-text-left'>";
                                replyStr+="<a href=''><img class='media-object' style='width:3em;height:3em;border-radius:50%;' src='images/"+obj.answerid.userpic +"' alt=''></a>";
                                replyStr+="<h5><a href=''>"+obj.answerid.username+"</a></h5></div>";
                                replyStr+="<div class='media-body response-text-right'><p>"+obj.rcontent+"</p>";
                                replyStr+="<ul><li>"+obj.replytime+"</li><li><a href='ReplyServelt?id="+obj.rid+"&newsid="+obj.newsid.newsid+"&userid="+obj.answerid.userid+"'>回复</a></li></ul>";
                                replyStr+=" </div><div class='clearfix'></div></div></div><div class='clearfix'></div></div>";
                                $("#comments").append(replyStr);});
                        }else{
                            var  replyStr="";
                            replyStr+="<p>尚未有人添加评论,赶快来抢占沙发吧</p>";
                            $("#comments").append(replyStr);
                        }
                        pageNo=data.pageNo;
                        totalPages=data.totalPages;
                    }

                });

            };
            getReplyList();
            $("#replys").focus(function(){
                $("#replys").css({"height":"6em","border-color":"blue"});
                $("#divhidden").css("display","block");
            });
            $("#replys").blur(function(){
                $("#replys").css({"height":"2em","border-color":"gray"});
                $("#divhidden").css("display","none");
            });
            $("#doReply").click(function () {
                getReplyList();
            });
            $("#replys").keyup(function(){
                var commentscounts=$("#replys").val().length;
                $("#tips").text("您还可以输入"+(200-commentscounts)+"个字符").css("color","black");
                /* $("#fontcounts").text(200-commentscounts);*/
                if(commentscounts<200){
                    $("#doReply").attr("disabled",false);
                }else{
                    $("#tips").text("已超出"+(commentscounts-200)+"个字符").css("color","red");
                    $("#doReply").attr("disabled",true);
                }
            });

        });

    </script>

</div>
</body>
</html>
